import { App } from 'vue'
import Skeleton from './Skeleton/index.vue'
import Carousel from './carousel/index.vue'
import More from './More/index.vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
import Bread from '@/components/bread/index.vue'
import BreadItem from '@/components/bread/item.vue'
import CheckBox from '@/components/checkbox/index.vue'
import XtxMessage from '@/components/message/message.vue'
export default {
  install(app: App) {
    app.component('XtxSkeleton', Skeleton)
    app.component('XtxCarousel', Carousel)
    app.component('XtxMore', More)
    app.component('XtxBread', Bread)
    app.component('XtxBreadItem', BreadItem)
    app.component('XtxCheckBox', CheckBox)
    app.component('XtxMessage', XtxMessage)
    app.directive('lazy', {
      mounted(el: HTMLImageElement, { value }) {
        // 图片的懒加载逻辑
        // 参数1：回调函数
        // 参数2：可选的配置
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 停止监听
            stop()
            // 给el元素设置src属性
            // value = '123.jpg'
            el.src = value
            // 如果图片加载失败，显示默认的图片
            el.onerror = function () {
              el.src =  defaultImg
            }
          }
        })
      }
    })
    
  }
  }